<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本框获取和失去焦点</title>
</head>

<body>
  <input type="text" id="input" value="">

  <script>
    // 题目：编写一段程序，实现文本框获取和失去焦点效果。要求：1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色

    // 解题思路：给文本框添加失去焦点和获得焦点事件，判断文本框内部value值，根据值的不同执行不同的代码

    // 获取元素
    var input = document.getElementById('input');
    // 获得焦点事件
    input.onfocus = function () {
      //判断文本框文字内容，如果内容是请输入搜索关键字把文本框内容清空
      if (this.value === '请输入搜索关键字') {
        this.value = '';
      }
      //设置文本框文字颜色黑色
      this.style.color = '#000';
    }
    //失去焦点事件
    input.onblur = function () {
      //判断文本框判断文本框文字内容，如果内容为空，代表用户没有输入，把文本框文字换成提示语
      if (this.value === '') {
        this.value = '请输入搜索关键字'
      }
      //设置文本框文字颜色为灰色
      this.style.color = '#ccc';
    }
  </script>
</body>

</html>